namespace MBA.FluentExt.Ext
{
	public abstract class AdvancedBoxComponent<T> : AdvancedComponent<T>
		where T : ExtObject
	{
		#region Properties

		/// <summary>
		/// Fires after the component is moved. 
		/// Javascript function arguments:
		/// this (Ext.Component): 
		/// x (Number): The new x position 
		/// y (Number): The new y position 
		/// </summary>
		public static Event Move
		{
			get { return new Event("move"); }
		}

		/// <summary>
		/// Fires after the component is resized. 
		/// Javascript function arguments:
		/// this (Ext.Component): 
		/// adjWidth (Number): The box-adjusted width that was set 
		/// adjHeight (Number): The box-adjusted height that was set 
		/// rawWidth (Number): The width that was originally specified 
		/// rawHeight (Number): The height that was originally specified 
		/// </summary>
		public static Event Resize
		{
			get { return new Event("resize"); }
		}

		#endregion Properties

		#region Methods

		/// <summary>
		/// True to use height:'auto', false to use fixed height (or allow it to be managed by its parent Container's layout manager. Defaults to false. Note: Although many components inherit this config option, not all will function as expected with a height of 'auto'. Setting autoHeight:true means that the browser will manage height based on the element's contents, and that Ext will not manage it at all. If the browser is managing the height, be aware that resizes performed by the browser in response to changes within the structure of the Component cannot be detected. Therefore changes to the height might result in elements needing to be synchronized with the new height. Example: var w = new Ext.Window({ title: 'Window', width: 600, autoHeight: true, items: { title: 'Collapse Me', height: 400, collapsible: true, border: false, listeners: { beforecollapse: function() { w.el.shadow.hide(); }, beforeexpand: function() { w.el.shadow.hide(); }, collapse: function() { w.syncShadow(); }, expand: function() { w.syncShadow(); } } } }).show(); 
		/// </summary>
		public T AutoHeight(bool autoHeight)
		{
			return Config<T>("autoHeight", autoHeight);
		}

		/// <summary>
		/// true to use overflow:'auto' on the components layout element and show scroll bars automatically when necessary, false to clip any overflowing content (defaults to false). 
		/// </summary>
		public T AutoScroll(bool autoScroll)
		{
			return Config<T>("autoScroll", autoScroll);
		}

		/// <summary>
		/// True to use width:'auto', false to use fixed width (or allow it to be managed by its parent Container's layout manager. Defaults to false. Note: Although many components inherit this config option, not all will function as expected with a width of 'auto'. Setting autoWidth:true means that the browser will manage width based on the element's contents, and that Ext will not manage it at all. If the browser is managing the width, be aware that resizes performed by the browser in response to changes within the structure of the Component cannot be detected. Therefore changes to the width might result in elements needing to be synchronized with the new width. For example, where the target element is: <div id='grid-container' style='margin-left:25%;width:50%'></div> A Panel rendered into that target element must listen for browser window resize in order to relay its child items when the browser changes its width: var myPanel = new Ext.Panel({ renderTo: 'grid-container', monitorResize: true, // relay on browser resize title: 'Panel', height: 400, autoWidth: true, layout: 'hbox', layoutConfig: { align: 'stretch' }, defaults: { flex: 1 }, items: [{ title: 'Box 1', }, { title: 'Box 2' }, { title: 'Box 3' }], }); 
		/// </summary>
		public T AutoWidth(bool autoWidth)
		{
			return Config<T>("autoWidth", autoWidth);
		}

		/// <summary>
		/// The maximum value in pixels which this BoxComponent will set its height to. Warning: This will override any size management applied by layout managers. 
		/// </summary>
		public T BoxMaxHeight(uint boxMaxHeight)
		{
			return Config<T>("boxMaxHeight", boxMaxHeight);
		}

		/// <summary>
		/// The maximum value in pixels which this BoxComponent will set its width to. Warning: This will override any size management applied by layout managers. 
		/// </summary>
		public T BoxMaxWidth(uint boxMaxWidth)
		{
			return Config<T>("boxMaxWidth", boxMaxWidth);
		}

		/// <summary>
		/// The minimum value in pixels which this BoxComponent will set its height to. Warning: This will override any size management applied by layout managers. 
		/// </summary>
		public T BoxMinHeight(uint boxMinHeight)
		{
			return Config<T>("boxMinHeight", boxMinHeight);
		}

		/// <summary>
		/// The minimum value in pixels which this BoxComponent will set its width to. Warning: This will override any size management applied by layout managers. 
		/// </summary>
		public T BoxMinWidth(uint boxMinWidth)
		{
			return Config<T>("boxMinWidth", boxMinWidth);
		}

		/// <summary>
		/// Note: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the BorderLayout or one of the two BoxLayout subclasses. An object containing margins to apply to this BoxComponent in the format: { top: (top margin), right: (right margin), bottom: (bottom margin), left: (left margin) } May also be a string containing space-separated, numeric margin values. The order of the sides associated with each value matches the way CSS processes margin values: If there is only one value, it applies to all sides. If there are two values, the top and bottom borders are set to the first value and the right and left are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If there are four values, they apply to the top, right, bottom, and left, respectively. Defaults to: {top:0, right:0, bottom:0, left:0} 
		/// </summary>
		public T Margins(int margins)
		{
			return Config<T>("margins", margins);
		}

		/// <summary>
		/// Note: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the BorderLayout or one of the two BoxLayout subclasses. An object containing margins to apply to this BoxComponent in the format: { top: (top margin), right: (right margin), bottom: (bottom margin), left: (left margin) } May also be a string containing space-separated, numeric margin values. The order of the sides associated with each value matches the way CSS processes margin values: If there is only one value, it applies to all sides. If there are two values, the top and bottom borders are set to the first value and the right and left are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If there are four values, they apply to the top, right, bottom, and left, respectively. Defaults to: {top:0, right:0, bottom:0, left:0} 
		/// </summary>
		public T Margins(int topAndBottom, int leftAndRight)
		{
			return Config<T>("margins", "{0} {1}".FormatWith(topAndBottom, leftAndRight));
		}

		/// <summary>
		/// Note: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the BorderLayout or one of the two BoxLayout subclasses. An object containing margins to apply to this BoxComponent in the format: { top: (top margin), right: (right margin), bottom: (bottom margin), left: (left margin) } May also be a string containing space-separated, numeric margin values. The order of the sides associated with each value matches the way CSS processes margin values: If there is only one value, it applies to all sides. If there are two values, the top and bottom borders are set to the first value and the right and left are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If there are four values, they apply to the top, right, bottom, and left, respectively. Defaults to: {top:0, right:0, bottom:0, left:0} 
		/// </summary>
		public T Margins(int top, int leftAndRight, int bottom)
		{
			return Config<T>("margins", "{0} {1} {2}".FormatWith(top, leftAndRight, bottom));
		}

		/// <summary>
		/// Note: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the BorderLayout or one of the two BoxLayout subclasses. An object containing margins to apply to this BoxComponent in the format: { top: (top margin), right: (right margin), bottom: (bottom margin), left: (left margin) } May also be a string containing space-separated, numeric margin values. The order of the sides associated with each value matches the way CSS processes margin values: If there is only one value, it applies to all sides. If there are two values, the top and bottom borders are set to the first value and the right and left are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If there are four values, they apply to the top, right, bottom, and left, respectively. Defaults to: {top:0, right:0, bottom:0, left:0} 
		/// </summary>
		public T Margins(int top, int right, int bottom, int left)
		{
			return Config<T>("margins", "{0} {1} {2} {3}".FormatWith(top, right, bottom, left));
		}

		/// <summary>
		/// The page level x coordinate for this component if contained within a positioning container. 
		/// </summary>
		public T PageX(int pageX)
		{
			return Config<T>("pageX", pageX);
		}

		/// <summary>
		/// The page level y coordinate for this component if contained within a positioning container. 
		/// </summary>
		public T PageY(int pageY)
		{
			return Config<T>("pageY", pageY);
		}

		/// <summary>
		/// Note: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the BorderLayout layout manager (e.g. specifying layout:'border'). See Ext.layout.BorderLayout also. 
		/// </summary>
		public T Region(Region region)
		{
			return Config<T>("region", region);
		}

		/// <summary>
		/// Note: this config is only used when this BoxComponent is a child item of a TabPanel. A string to be used as innerHTML (html tags are accepted) to show in a tooltip when mousing over the associated tab selector element. Ext.QuickTips.init() must be called in order for the tips to render. 
		/// </summary>
		public T TabTip(string tabTip)
		{
			return Config<T>("tabTip", tabTip);
		}

		public new BoxComponent ToBasic()
		{
			return new BoxComponent { configDictionary = configDictionary };
		}

		/// <summary>
		/// The local x (left) coordinate for this component if contained within a positioning container. 
		/// </summary>
		public T X(int x)
		{
			return Config<T>("x", x);
		}

		/// <summary>
		/// The local y (top) coordinate for this component if contained within a positioning container. 
		/// </summary>
		public T Y(int y)
		{
			return Config<T>("y", y);
		}

		#endregion Methods
	}

	public class AdvancedBoxComponent : AdvancedBoxComponent<AdvancedBoxComponent>
	{
		protected override string ExtNamespace
		{
			get { return "Ext.BoxComponent"; }
		}
	}

	public abstract class BoxComponent<T> : Component<T>
		where T : ExtObject
	{
		#region Methods

		/// <summary>
		/// Note: this config is only used when this Component is rendered by a Container which has been configured to use an AnchorLayout (or subclass thereof). based layout manager, for example: Ext.form.FormPanel specifying layout: 'anchor' // or 'form', or 'absolute' See Ext.layout.AnchorLayout.anchor also. 
		/// </summary>
		public T Anchor(AnchorUnit anchor)
		{
			return Config<T>("anchor", "{0}".FormatWith(anchor));
		}

		/// <summary>
		/// Note: this config is only used when this Component is rendered by a Container which has been configured to use an AnchorLayout (or subclass thereof). based layout manager, for example: Ext.form.FormPanel specifying layout: 'anchor' // or 'form', or 'absolute' See Ext.layout.AnchorLayout.anchor also. 
		/// </summary>
		public T Anchor(AnchorUnit horizontalAnchor, AnchorUnit verticalAnchor)
		{
			return Config<T>("anchor", "{0} {1}".FormatWith(horizontalAnchor, verticalAnchor));
		}

		/// <summary>
		/// Note: this config is only used when this Component is rendered by a Container which has been configured to use a BoxLayout. Each child Component with a flex property will be flexed either vertically (by a VBoxLayout) or horizontally (by an HBoxLayout) according to the item's relative flex value compared to the sum of all Components with flex value specified. Any child items that have either a flex = 0 or flex = undefined will not be 'flexed' (the initial size will not be changed). 
		/// </summary>
		public T Flex(float flex)
		{
			return Config<T>("flex", flex);
		}

		/// <summary>
		/// The height of this component in pixels (defaults to auto). Note to express this dimension as a percentage or offset see Ext.Component.anchor. 
		/// </summary>
		public T Height(int height)
		{
			return Config<T>("height", height);
		}

		public new AdvancedBoxComponent ToAdvanced()
		{
			return new AdvancedBoxComponent {configDictionary = configDictionary};
		}

		/// <summary>
		/// The width of this component in pixels (defaults to auto). Note to express this dimension as a percentage or offset see Ext.Component.anchor. 
		/// </summary>
		public T Width(uint width)
		{
			return Config<T>("width", width);
		}

		#endregion Methods
	}

	public class BoxComponent : BoxComponent<BoxComponent>
	{
		protected override string ExtNamespace
		{
			get { return "Ext.BoxComponent"; }
		}

	}
}